<template>
  <section id="bill-detail" class="background-light">
        <magic-header titleName="账单明细"></magic-header>
        <template v-if="!hasBill">
        <div class="content" id="content">
            <mu-flexbox class="flex-demo" v-show="isShow">
              <mu-flexbox-item v-if="detailBill.verifyState==2" vs class="font-color">
                {{({'0':'待审核','1':'审核通过','2':'审核不通过'})[detailBill.verifyState]}}
              </mu-flexbox-item>
              <mu-flexbox-item v-else>
                {{({'0':'待审核','1':'审核通过','2':'审核不通过'})[detailBill.verifyState]}}
              </mu-flexbox-item>
              <mu-flexbox-item v-if="detailBill.verifyState==2" class="font-color">
                 {{detailBill.verifyRemarks}}
              </mu-flexbox-item>
              <mu-flexbox-item v-else>
                 {{detailBill.verifyRemarks}}
              </mu-flexbox-item>
            </mu-flexbox> 
            <mu-flexbox  class="flex-demo">
              <mu-flexbox-item>
                用户名
              </mu-flexbox-item>
              <mu-flexbox-item>
                {{detailBill.userName}}
              </mu-flexbox-item>
            </mu-flexbox>   
            <mu-flexbox  class="flex-demo">
              <mu-flexbox-item>
                车牌号
              </mu-flexbox-item>
              <mu-flexbox-item>
                {{detailBill.plateNumber}}
              </mu-flexbox-item>
            </mu-flexbox> 
            <mu-flexbox  class="flex-demo" v-if="detailBill.fleetname">
              <mu-flexbox-item>
                车队
              </mu-flexbox-item>
              <mu-flexbox-item>
                {{detailBill.fleetname}}
              </mu-flexbox-item>
            </mu-flexbox>   
            <mu-flexbox  class="flex-demo">
              <mu-flexbox-item>
                日期
              </mu-flexbox-item>
              <mu-flexbox-item>
                {{detailBill.happenDate}}
              </mu-flexbox-item>
            </mu-flexbox> 
            <mu-flexbox  class="flex-demo">
              <mu-flexbox-item>
                费用类型
              </mu-flexbox-item>
              <mu-flexbox-item>
                {{detailBill.frontExpenseName}}
              </mu-flexbox-item>
            </mu-flexbox> 
            <mu-flexbox  class="flex-demo" v-if="detailBill.userDefineAlias">
              <mu-flexbox-item>
                费用说明
              </mu-flexbox-item>
              <mu-flexbox-item>
                {{detailBill.userDefineAlias}}
              </mu-flexbox-item>
            </mu-flexbox> 
            <mu-flexbox  class="flex-demo">
              <mu-flexbox-item>
                费用金额(元)
              </mu-flexbox-item>
              <mu-flexbox-item>
                {{detailBill.cost}}
              </mu-flexbox-item>
            </mu-flexbox>
            <mu-flexbox  class="flex-demo" v-if="images.length > 0">
              <mu-flexbox-item>
                上传凭证
              </mu-flexbox-item>
              <mu-flexbox-item>
              </mu-flexbox-item>
            </mu-flexbox>
            <magic-image :bigImage="images" :smallImage="images"></magic-image>
          </div>
          <div @click="closeImg" class="overlay">
               <img :src="imageValue" :style="imgStyle"/>
          </div>
          <mu-raised-button label="删除" class="delete" @click="open()" primary fullWidth/>
          <mu-snackbar class="center" v-if="snackbar" :message="message" action="关闭" @actionClick="hideSnackbar"
                       @close="hideSnackbar"/>
          <mu-dialog :open="dialog" @close="close" :bodyClass="bodyClass">
            确定删除此账单么?
            <mu-flat-button slot="actions" @click="close" primary label="取消"/>
            <mu-flat-button slot="actions" primary @click="ok" label="确定"/>
          </mu-dialog>
		    </template>
        <empty v-if="hasBill" message="未找到账单"></empty>
      <!-- </content-with-loading> -->
  </section>
</template>
<script>
  import magicHeader from 'components/magicHeader'
  import viewBill from 'services/view-bill'
  import delbBill from 'services/del-bill'
  import clientInfo from 'utilities/client-info'
  import magicImage from 'components/image/ma_image'
  import empty from "components/empty-page-vfhz"
  export default {
    components: {
      magicHeader,
      magicImage,
      empty
    },
    data() {
      return {
        loaded:true,
        snackbar: false,
        message:'',
        dialog: false,
        detailBill:[],
        images:[],
        isNativeWebView:false,
        imageValue:'',
        imgStyle:'',
        isShow:true,
        hasBill:false
      }
    },
    created(){
      if(this.$route.query.id === undefined){
        this.hasBill = true;
        return;
      }
      this.isNativeWebView=clientInfo.render.isNativeWebView
      this.images = [] 
      viewBill.bind(this)({
          id:this.$route.query.id,
          methodName:'QueryCarCost'
      },res => {
        console.log(res)
          this.detailBill = res.carCost;
            console.log(222222222222222)
            console.log(this.detailBill.fleetname === '')
            if(this.detailBill.fleetname === ''){
              this.isShow = false;
            }
          this.images = res.carCost.images
      },err => {

      })
    },
     watch:{
      '$route':function(to,from){
        if(to.name==='bill-detail'){
          this.initData()  
        }
      }
    },
    methods:{
      initData(){
        this.isNativeWebView=clientInfo.render.isNativeWebView
        this.images = [] 
        viewBill.bind(this)({
          id:this.$route.query.id,
        },(data)=>{
            this.detailBill = data.carCost
            console.log(222222222222222)
            console.log(this.detailBill)
            if(this.detailBill.fleetname === ''){
              this.isShow = false;
            }
            this.images = this.detailBill.images
          },(error)=>{
            this.message=error
            this.showMessage=true
        })
      },
      closeImg () {
        document.querySelector(".overlay").style.display = "none"
      },
      // 图片放大
      enlarge(item){
        document.querySelector(".overlay").style.display = "block"
        this.imageValue = item
        this.imgStyle = "position: absolute; width: 100vw; height:83vh;z-index:10"
      },
      open () {
        this.dialog = true
      },
      close () {
        this.dialog = false
      },
      ok () {
          delbBill.bind(this)({
          ids: [this.$route.query.id]
          }, (data) => {
          if (data.resultCode != "100") {
            this.$.toast(data.errorMessage)
            return false;
          }
          console.log(data);
          this.$router.replace({
            name:'car_bill',
            params:{
              index:this.$route.query.index
            }
          })
          }, (error) => {
          this.message = error
          this.showSnackbar();
          return false;
        })
        this.dialog = false
      },
      showSnackbar() {
        this.snackbar = true
        if (this.snackTimer) clearTimeout(this.snackTimer)
        this.snackTimer = setTimeout(() => { this.snackbar = false }, 2000)
      },
      hideSnackbar() {
        this.snackbar = false
        if (this.snackTimer) clearTimeout(this.snackTimer)
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../scss/common-styles.scss";
  @import "../../scss/variables.scss";
  .mu-dialog-body {
    text-align: center
  }  
  .mu-dialog-footer{
    justify-content:space-around;
  } 
  #bill-detail{  
  overflow: auto;
  .result_empty{
    height: calc(100vh - 50px)
  }
    .content{
      padding:20px;
      min-height:65%
    } 
    .flex-demo{
      margin-top: 10px
    }
    .font-color{
      color:red
    }
    .overlay{
      display: none;
      position: fixed;
      width: 100%;
      height: 100%;
      vertical-align: top;
      white-space: normal;
      top: 70px;
      z-index: 1000;
    }         
    .image-container{
      margin-top: 5px
    } 
}
</style>

